#フローティングバー

使用する[number, number][]のタイプとしてdata各バーの開始値と終了値を定義します。これは、すべてのバーを 0 から開始する代わりに行われます。

const 構成 = {
  タイプ: 'バー'、
  データ: データ、
  オプション: {
    応答性: true、
    プラグイン: {
      伝説： {
        位置: 'トップ'、
      }、
      タイトル： {
        表示: true、
        テキスト: 'Chart.js 浮動棒グラフ'
      }
    }
  }
};const config = {
  type: 'bar',
  data: data,
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Chart.js Floating Bar Chart'
      }
    }
  }
};

const DATA_COUNT = 7;
const NUMBER_CFG = {カウント: DATA_COUNT、最小: -100、最大: 100};
const label = Utils.months({count: 7});
定数データ = {
  ラベル: ラベル、
  データセット: [
    {
      ラベル: 'データセット 1'、
      データ: ラベル.マップ(() => {
        return [Utils.rand(-100, 100), Utils.rand(-100, 100)];
      })、
      背景色: Utils.CHART_COLORS.red、
    }、
    {
      ラベル: 'データセット 2'、
      データ: ラベル.マップ(() => {
        return [Utils.rand(-100, 100), Utils.rand(-100, 100)];
      })、
      背景色: Utils.CHART_COLORS.blue、
    }、
  】
};const DATA_COUNT = 7;
const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: labels.map(() => {
        return [Utils.rand(-100, 100), Utils.rand(-100, 100)];
      }),
      backgroundColor: Utils.CHART_COLORS.red,
    },
    {
      label: 'Dataset 2',
      data: labels.map(() => {
        return [Utils.rand(-100, 100), Utils.rand(-100, 100)];
      }),
      backgroundColor: Utils.CHART_COLORS.blue,
    },
  ]
};

const アクション = [
  {
    名前: 'ランダム化'、
    ハンドラー(チャート) {
      chart.data.datasets.forEach(dataset => {
        dataset.data = chart.data.labels.map(() => {
          return [Utils.rand(-100, 100), Utils.rand(-100, 100)];
        });
      });
      chart.update();
    }
  }、
];const actions = [
  {
    name: 'Randomize',
    handler(chart) {
      chart.data.datasets.forEach(dataset => {
        dataset.data = chart.data.labels.map(() => {
          return [Utils.rand(-100, 100), Utils.rand(-100, 100)];
        });
      });
      chart.update();
    }
  },
];

#ドキュメント

←棒グラフの境界線の半径横棒グラフ→